<template>
  <div>
    <div class="wrapper">
      <n-grid
        cols="1 s:2 m:3 l:3 xl:3 2xl:6"
        :x-gap="10"
        :y-gap="30"
        responsive="screen"
      >
        <n-grid-item v-for="(it, index) of projectList" :key="index">
          <n-card
            class="p-card-wrapper"
            content-style="padding: 0 10px 10px 10px;"
            hoverable
          >
            <div class="header-wrapper">
              <div class="title">
                <n-badge processing :value="it.badge || ''">
                  <img :src="it.logo" />
                </n-badge>
                <div>
                  {{ it.title }}
                </div>
              </div>
              <div class="sub-title">
                <n-space>
                  <n-tag v-for="(tag, i) of it.tags" :key="i" size="small">
                    {{ tag }}
                  </n-tag>
                </n-space>
              </div>
              <div style="margin-top: 30px">
                <n-space>
                  <n-button
                    type="primary"
                    size="small"
                    :tertiary="true"
                    round
                    @click="onPreview(it)"
                    >点击预览</n-button
                  >
                  <n-button
                    :type="it.price === 0 ? 'success' : 'error'"
                    size="small"
                    :tertiary="true"
                    round
                    @click="onPermission(it)"
                    >{{ it.price === 0 ? "免费开源" : "获取授权" }}</n-button
                  >
                </n-space>
              </div>
            </div>
            <div class="content-wrapper">
              <div v-if="it.prices">
                <div
                  v-for="(price, index) of it.prices"
                  :key="index"
                  class="price-wrapper"
                >
                  <span class="price">
                    <span style="font-size: 14px; font-weight: normal">
                      套餐{{ index + 1 }}：
                    </span>
                    {{ price.price }}
                  </span>
                  <div class="origin-price">{{ price.tip }}</div>
                </div>
              </div>
              <n-alert v-else type="info" :show-icon="false">
                <div
                  class="address-wrapper"
                  v-for="address of it.address"
                  :key="address.key"
                >
                  <div>
                    {{ address.label }}
                  </div>
                  <div style="height: 5px"></div>
                  <n-ellipsis>
                    <n-a :href="address.key" target="_blank">
                      {{ address.key }}
                    </n-a>
                  </n-ellipsis>
                </div>
              </n-alert>
            </div>
          </n-card>
        </n-grid-item>
      </n-grid>
    </div>
    <n-card title="关于购买声明" hoverable class="item" segmented>
      <n-ul>
        <n-li>
          1.购买者可将授权后的产品用于任意「符合国家法律法规」的应用平台，禁止用于黄赌毒等危害国家安全与稳定的网站。
        </n-li>
        <n-li>
          2.购买主体购买后可用于开发商业项目，不限制域名和项目数量，购买主体不可将源码分享第三方，否则我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
        </n-li>
        <n-li>
          3.购买者务必尊重知识产权，严格保证不恶意传播产品源码、不得直接对授权的产品本身进行二次转售或倒卖、开源、不得对授权的产品进行简单包装后声称为自己的产品等，无论有意或无意，我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
        </n-li>
        <n-li>
          4.用于公司的项目商用时购买需提供公司名称，用于证明购买过我们的项目来用于商业用途，防范法律风险，我们不会将【购买公司】信息泄漏到互联网或告知第三方。
        </n-li>
        <n-li> 5.虚拟物品下单后不支持退货退款。 </n-li>
        <n-li> 6.如无法遵守以上约定，请勿下单。 </n-li>
        <n-li> 7.最终解释权归admin work系列著作权人所有。 </n-li>
      </n-ul>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import {
  ELEMENT_UI,
  ELEMENT_PLUS,
  NAIVE_UI,
  ARCO_DESIGN,
  ANTD,
} from "../assets/logo";
import { useRouter } from "vue-router";
import { inject } from "@vue/runtime-core";
import { useMessage } from "naive-ui";
const router = useRouter();
const state = inject("state") as any;
function getSource() {
  router.push("/about");
}
const projectList = [
  {
    logo: ANTD,
    title: "Admin Work A",
    subTitle: "Vue3 + Vite2 + Typescript + Antd",
    tags: ["Vue3", "Vite2", "Typescript", "Antd"],
    price: state.price,
    price2: state.price2,
    preview: "https://qingqingxuan.gitee.io/vue-admin-work-a",
    badge: "new",
    prices: [
      {
        price: state.price,
        tip: "单独Admin Work A版",
      },
      {
        price: state.price2,
        tip: "Admin Work A + Admin Work P",
      },
    ],
  },
  {
    logo: NAIVE_UI,
    title: "Admin Work P",
    subTitle: "Vue3 + Vite2 + Typescript + Naive UI",
    tags: ["Vue3", "Vite2", "Typescript", "Naive UI"],
    price: state.price,
    price2: state.price2,
    preview: "https://qingqingxuan.gitee.io/vue-admin-work-p",
    badge: "hot",
    prices: [
      {
        price: state.price,
        tip: "单独Admin Work P版",
      },
      {
        price: state.price2,
        tip: "Admin Work P + 任意一版",
      },
    ],
  },
  {
    logo: ARCO_DESIGN,
    title: "Arco Work",
    subTitle: "Vue3 + Vite2 + Typescript + Arco Design",
    tags: ["Vue3", "Vite2", "Typescript", "Arco Design"],
    price: "￥399",
    price2: state.price2,
    preview: "https://qingqingxuan.gitee.io/arco-work",
    badge: "new",
    prices: [
      {
        price: state.price,
        tip: "单独Arco Work版",
      },
      {
        price: state.price2,
        tip: "Arco Work + Admin Work P",
      },
    ],
  },
  {
    logo: ELEMENT_UI,
    title: "Vue Admin Work",
    subTitle: "Vue2 + Webpack + Javascript + Element UI",
    tags: ["Vue2", "Webpack", "Javascript", "Element UI"],
    price: 0,
    preview: "https://qingqingxuan.gitee.io/vue-admin-work",
    address: [
      {
        label: "github地址",
        key: "https://github.com/qingqingxuan/vue-admin-work",
      },
      {
        label: "gitee地址",
        key: "https://gitee.com/qingqingxuan/vue-admin-work",
      },
    ],
  },
  {
    logo: ELEMENT_PLUS,
    title: "Vue Admin Work X",
    subTitle: "Vue3 + Webpack + Typescript + Element Plus",
    tags: ["Vue3", "Webpack", "Typescript", "Element Plus"],
    preview: "https://qingqingxuan.gitee.io/vue-admin-work-x",
    price: 0,
    address: [
      {
        label: "github地址",
        key: "https://github.com/qingqingxuan/vue-admin-work-x",
      },
      {
        label: "gitee地址",
        key: "https://gitee.com/qingqingxuan/vue-admin-work-x",
      },
    ],
  },
  {
    logo: NAIVE_UI,
    title: "Admin Work",
    subTitle: "Vue3 + Vite2 + Typescript + Naive UI",
    tags: ["Vue3", "Vite2", "Typescript", "Naive UI"],
    price: 0,
    preview: "https://qingqingxuan.gitee.io/admin-work",
    address: [
      {
        label: "github地址",
        key: "https://github.com/qingqingxuan/admin-work",
      },
      {
        label: "gitee地址",
        key: "https://gitee.com/qingqingxuan/admin-work",
      },
    ],
  },
];
function onPreview(item: any) {
  window.open(item.preview);
}
const message = useMessage();
function onPermission(item: any) {
  if (item.price === 0) {
    message.success("免费开源版，下载源码即可使用");
  } else {
    message.success("点击右下方按钮添加微信客服进行授权");
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  max-width: 1200px;
  margin: 30px auto;
  flex-wrap: wrap;
  justify-content: center;
  .margin {
    margin: 0 30px;
  }
  .p-card-wrapper {
    box-shadow: var(--box-shadow);
    width: 90%;
    margin: 0 auto;
    .header-wrapper {
      min-height: 200px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .title {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        color: var(--text-color);
        & img {
          height: 40px;
        }
      }
      .sub-title {
        font-size: 14px;
        margin-top: 5px;
        color: #888;
      }
    }
    .content-wrapper {
      .price-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        .price {
          font-size: 18px;
          font-weight: bold;
          color: rgb(158, 1, 33);
        }
        .origin-price {
          margin-left: 10px;
          color: #888;
          font-size: 12px;
        }
      }
      .address-wrapper + .address-wrapper {
        margin-top: 10px;
      }
    }
  }
}
.item {
  width: 93%;
  margin: 0 auto;
  margin-bottom: 20px;
}
</style>
